<template>
  <div class="app-container">
    <detail-table :columns="columns" :detail="detail" :label-width="150">
      <div slot="familyConsentLetter" slot-scope="scope">
        <a :href="scope.row.familyConsentLetter">点击下载家长同意书</a>
      </div>
      <div slot="familyRefuseInformedLetter" slot-scope="scope">
        <a :href="scope.row.familyRefuseInformedLetter">点击下载家长不同意知情书</a>
      </div>
      <div slot="studentAssessTable" slot-scope="scope">
        <a :href="scope.row.studentAssessTable">点击下载学生评估表</a>
      </div>
    </detail-table>
    <div v-if="detail.photo" class="photo-area">
      <img :src="detail.photo" alt="学生照片">
    </div>
  </div>
</template>

<script>
import { getStudentDetail } from '@/api/basic'
import DetailTable from '@/components/detail-table/index'
import { studentDetailColumns } from '../../columns'

export default {
  components: { DetailTable },
  data() {
    return {
      columns: studentDetailColumns,
      detail: {}
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    async getDetail() {
      const id = this.$route.params.id
      try {
        const res = await getStudentDetail({
          id: Number(id)
        })
        if (res) {
          this.detail = res
        }
      } catch (err) {
        console.log('接口出错')
      }
    }
  }
}

</script>
<style scoped lang="less">
  .app-container {
    background: #fff;
    position: relative;
  }
  .photo-area {
    position: absolute;
    top: 0;
    right: 0;
    img {
      width: 300px;
    }
  }
  a {
    color: #409EFF;
  }
</style>
